<!--
 * @Author: LiZhiWei
 * @Date: 2025-01-02
 * @Description: Scaffold 表格容器组件 - 提取 el-row/el-col 布局和样式计算的公共部分
-->
<template>
  <el-row :class="rowClass">
    <el-col :span="leftSpan">
      <slot name="left" />
    </el-col>
    <el-col :span="rightSpan" :style="tableStyle">
      <div class="list-header-options">
        <slot name="header-options" />
      </div>

      <slot name="table" v-bind="{ columns, list, actions }">
        <CommonTable
          v-bind="$attrs"
          :columns="columns"
          :data="list"
          :actions="actions"
          @selection-change="$emit('selection-change', $event)"
          @on-show="$emit('on-show', $event)"
          @on-edit="$emit('on-edit', $event)"
          @on-edit-page="$emit('on-edit-page', $event)"
          @on-del="$emit('on-del', $event)"
          @on-force-del="$emit('on-force-del', $event)"
          @on-restore="$emit('on-restore', $event)"
        >
          <!-- 传递所有插槽 -->
          <template v-for="(_, name) in $slots" #[name]="slotData">
            <slot :name="name" v-bind="slotData" />
          </template>
        </CommonTable>
      </slot>

      <slot name="pagination" />
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
  defineOptions({
    name: 'TableWrapper',
    inheritAttrs: false,
  })

  const props = withDefaults(
    defineProps<{
      leftSpan?: number
      rowClass?: string
      columns: any[]
      list: any[]
      actions: AclPermission
    }>(),
    {
      leftSpan: 0,
      rowClass: 'border-t-1px border-t-color1',
    }
  )

  defineEmits<{
    (e: 'selection-change', val: any[]): void
    (e: 'on-show', id: string | number): void
    (e: 'on-edit', id: string | number): void
    (e: 'on-edit-page', id: string | number): void
    (e: 'on-del', id: string | number): void
    (e: 'on-force-del', id: string | number): void
    (e: 'on-restore', id: string | number): void
  }>()

  const rightSpan = computed(() => 24 - props.leftSpan)
  const tableStyle = computed(() => (props.leftSpan > 0 ? 'border-left: 1px solid #EBEEF5' : ''))
</script>
